<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h1>LTX体检报告与健康管理系统</h1>
        <p>医生:{{ doctor.realname }}</p>
      </el-header>
      <el-container>
        <el-aside width="260px">
          <h4>体检用户查询</h4>
          <el-form label-width="auto" style="max-width: 600px">
            <el-form-item label="手机号码">
              <el-input v-model="pag.userid" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="pag.realname" />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="pag.sex">
                <el-radio value="0">女</el-radio>
                <el-radio value="1">男</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="套餐类型">
              <el-select v-model="pag.name" placeholder="请选择套餐类型">
                <el-option v-for="(s, index) in seteaml" :label="s.name" :value="s.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="体检日期">
              <el-col :span="22">
                <el-date-picker v-model="pag.orderdate" type="date" placeholder="请输入体检日期" style="width: 100%" />
              </el-col>
            </el-form-item>
            <el-form-item label="是否归档">
              <el-radio-group v-model="pag.status">
                <el-radio value="2">未归档</el-radio>
                <el-radio value="3">已归档</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="warning" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-aside>
        <el-main>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column fixed prop="orderid" label="预约编号" width="300" />
            <el-table-column prop="userid" label="手机号码" width="150" />
            <el-table-column prop="realname" label="真实姓名" width="100" />
            <el-table-column label="性别" width="100">
              <template #default="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column prop="sname" label="体检套餐类型" width="160" />
            <el-table-column prop="hname" label="体检医院" width="120" />
            <el-table-column prop="orderdate" label="体检日期" width="160" />
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="tocontent(scope.row)">
                  {{ scope.row.state == 2 ? '编辑体检报告' : '查看体检报告' }}
                </el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="pag.page" v-model:page-size="pag.pageSize"
              :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getSessionStorage } from '../router/common'
import axios from '../router/axios'
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      doctor: {
        realname: getSessionStorage('doctor').realname,
      },
      seteaml: [],
      pag: {
        page: 1,
        pageSize: 10,
        userid: '',
        realname: '',
        sex: '',
        name: '',
        orderdate: '',
        status: '',
      },
      total: 50,
      tableData: []
    });
    onSubmit()
    function onSubmit() {
      // 如果日期仍然是Date对象，手动格式化
      if (state.pag.orderdate instanceof Date) {
        const year = state.pag.orderdate.getFullYear();
        const month = String(state.pag.orderdate.getMonth() + 1).padStart(2, '0');
        const day = String(state.pag.orderdate.getDate()).padStart(2, '0');
        state.pag.orderdate = `${year}-${month}-${day}`;
      }
      console.log(state.pag);
      axios.get('api/doctor/orders/page', {
        params: {
          page: state.pag.page,
          pageSize: state.pag.pageSize,
          userid: state.pag.userid,
          realname: state.pag.realname,
          sex: state.pag.sex,
          name: state.pag.name,
          orderdate: state.pag.orderdate,
          state: state.pag.status,
        }
      })
        .then(function (response) {
          const result = response.data;
          if (result.code == 1) {
            state.tableData = result.data.records;
            state.total = result.data.total;
          } else {
            state.tableData = [];
            state.total = 0;
          }
        })
        .catch(function (error) {
          // 错误处理
          console.log(error);
        })
        .finally(function () {
          // 总是执行
        });
    }
    function reset() {
      axios.get('api/doctor/orders/page', {
        params: {
          page: 1,
          pageSize: state.pag.pageSize,
          userid: '',
          realname: '',
          sex: '',
          name: '',
          orderdate: '',
          state: '',
        }
      })
        .then(function (response) {
          const result = response.data;
          if (result.code == 1) {
            state.tableData = result.data.records;
            state.total = result.data.total;
            state.pag.page=1;
            state.pag.pageSize=10;
            state.pag.userid= '';
            state.pag.realname= '';
            state.pag.sex= '';
            state.pag.name= '';
            state.pag.orderdate= '';
            state.pag.status= '';
          } else {
            state.tableData = [];
            state.total = 0;
          }
        })
        .catch(function (error) {
          // 错误处理
          console.log(error);
        })
        .finally(function () {
          // 总是执行
        });
    }
    seteamllist()
    function seteamllist() {
      axios.post('api/doctor/setmeal/list')
        .then(function (response) {
          const result = response.data;
          console.log(result);
          if (result.code == 1) {
            state.seteaml = result.data;
          } else {
            alert(result.msg);
          }
        })
        .catch(function (error) {
          // 错误处理
          console.log(error);
        })
        .finally(function () {
          // 总是执行
        });
    }
    function tocontent(row) {
      console.log(row);
      axios.post('/api/doctor/createReportTemplate', {
        orderid: row.orderid,
        smid: row.smid,
      })
        .then(function (response) {
          router.push({
            path: "/ordercontent",
            query: {
              hanme: row.hname,
              orderdate: row.orderdate,
              orderid: row.orderid,
              realname: row.realname,
              sex: row.sex,
              smid: row.smid,
              sname: row.sname,
              userid: row.userid,
              state: row.state
            }
          });
        })
        .catch(function (error) {
          // 错误处理
          console.log(error);
        })
        .finally(function () {
          // 总是执行
        });
    }
    function handleSizeChange(val) {
      state.pag.pageSize = val;
      onSubmit(); // 直接调用查询方法
    }

    function handleCurrentChange(val) {
      state.pag.page = val;
      onSubmit(); // 直接调用查询方法
    }

    return {
      ...toRefs(state),
      onSubmit,
      tocontent,
      handleSizeChange,  // 确保这两个方法被暴露出去
      handleCurrentChange,
      reset,
      seteamllist
    };
  },
};
</script>

<style scoped>
.common-layout {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.el-container {
  flex: 1;
  overflow: hidden;
}

.el-header {
  background-color: #1c51a3;
  color: #fff;
  height: 80px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.el-aside {
  background-color: #f5f7fa;
  padding: 20px;
  border-right: 1px solid #e6e6e6;
}

.el-main {
  overflow-y: auto;
  height: 100%;
  padding: 20px;
  background-color: #fff;
}

.demo-pagination-block {
  margin-top: 10px;
}

/* 移除原有的.custom-icon样式 */
</style>